

import { ProTable } from '@ant-design/pro-components';
import React, { useEffect, useRef, useState } from 'react';
import { Resizable } from 'react-resizable';
import '@/static/style.less';

const ResizeableTitle = (props) => {

    const { onResize, width, ...restProps } = props;

    if (!width) {
        return <th {...restProps} />;
    }

    return (
        <Resizable
            width={width}
            height={0}
            onResize={onResize}
            draggableOpts={{ enableUserSelectHack: false }}
        >
            <th {...restProps} />
        </Resizable>
    );
};





const ResizeTable = (props) => {
    const [isHidden, setIsHidden] = useState(true)
    // 内容数据
    const dataSource = [
        {
            key: 0,
            date: '2018-02-11',
            amount: 120,
            type: 'income',
            note: 'transfer',
        },
        {
            key: 1,
            date: '2018-03-11',
            amount: 243,
            type: 'income',
            note: 'transfer',
        },
        {
            key: 2,
            date: '2018-04-11',
            amount: 98,
            type: 'income',
            note: 'transfer',
        },
    ]
    // 列名数据
    const columns = [
        {
            title: '日期',
            dataIndex: 'date',
            width: 200,
            ellipsis: true,

        },
        {
            title: 'Amount',
            dataIndex: 'amount',
            width: 100,
            ellipsis: true,
        },
        {
            title: 'Type',
            dataIndex: 'type',
            width: 100,
            ellipsis: true,
        },
        {
            title: 'Note',
            dataIndex: 'note',
            width: 100,
            ellipsis: true,
        },
        {
            title: 'Action',
            key: 'action',
            render: () => <a>Delete</a>,
        }
    ]
    const [cols, setCols] = useState();
    const colsRef = useRef([]);


    const components = {
        header: {
            cell: ResizeableTitle,
        },
    };

    useEffect(() => {
        setCols(columns);
    }, [])

    const handleResize = (index) => (e, { size }) => {
        const nextColumns = [...cols];

        nextColumns[index] = {
            ...nextColumns[index],
            width: size.width,
        };

        setCols(nextColumns);
    };

    colsRef.current = (cols || []).map((col, index) => ({
        ...col,
        onHeaderCell: (column) => ({
            width: column.width,
            onResize: handleResize(index),
        }),
    }))

    return (
        <div className="components-table-resizable-column">
            <ProTable
                components={components}
                columns={colsRef.current}
                dataSource={dataSource}
                options={false}
                search={false}
            />
        </div>
    )
}

export default ResizeTable;

